<template>
	<div class="main">
		<h1>Bingbing<br>高考志愿服务平台</h1>
		<div id="enter-box">
			<a id="enter" href="/#/home">
				<el-button>进入</el-button>
			</a>
			<span id="manager" @click="dialogVisible = true">
				<el-button type="text">管理员</el-button>
			</span>

		</div>
		<el-dialog title="管理员登陆" v-model="dialogVisible" width="30%" :before-close="handleClose">
			<el-form >
			  <el-form-item label="账号">
			    <el-input v-model="managerName" placeholder="输入管理员账号"></el-input> 
				<span style="color: red;">admin</span>
			  </el-form-item>
			  <el-form-item label="密码">
			    <el-input v-model="managerPwd" placeholder="输入管理员密码"></el-input>
				<span style="color: red;">admin</span>
			  </el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="enterManager">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { defineComponent } from 'vue'
	import { ElMessage } from 'element-plus'

	export default {
		name: 'HelloWorld',
		data() {
			return {
				dialogVisible: false,
				managerName: '',
				managerPwd: ''
			};
		},
		props: {
			msg: String
		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			enterManager(){
				if(this.managerName == 'admin' && this.managerPwd == 'admin'){
					this.dialogVisible = false;
					this.$router.push({ path:'/main'  });
				}else{
					ElMessage.error('密码错误，请重新输入！');
				}
			}
		},
		mounted() {
			// 实现APP的高度占满全屏
			$('.main').height($(window).height())
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.main {
		background-image: url(../assets/mountain.jpg);
		background-size: cover;
		background-attachment: fixed;
	}

	h1 {
		top: 10%;
		font-weight: bold;
		position: absolute;
		text-align: center;
		width: 100%;
		letter-spacing: 10px;
		color: #fff;
	}

	#enter-box {
		position: absolute;
		letter-spacing: 2px;
		top: 50%;
		width: 60%;
		color: #fff;
		left: 50%;
		transform: translateX(-50%);
		padding: 30px;
		background-color: rgba(0, 0, 0, .3);
		border-radius: 20px;
	}

	#enter .el-button {
		background-color: rgba(255, 255, 255, .3);
		text-align: center;
		color: white;
		margin-left: 45%;

	}

	#manager .el-button {
		color: #FFFFFF;
		margin-left: 120px;
	}
</style>
